<template>
  <div class="box">
    <h1>张三</h1>
    <!-- {{  }} 语法 -->
    <!-- 文本 -->
    <h1>{{ name }}</h1>
    <!-- 表达式 -->
    <h1>{{ count + 1 }}</h1>
    <!-- 函数 -->
    <h1>{{ fun1() }}</h1>

    <h1>{{ htmStr }}</h1>

    <!-- 指令绑定   v-text  v-html -->
    <h2 v-text="name"></h2>
    <h2 v-html="htmStr"></h2>


    <!-- v-bind的绑定属性 -->
     <img src="https://img0.baidu.com/it/u=970536072,1332942785&fm=253&app=138&f=JPEG?w=800&h=1200" alt="图片">
     <img v-bind:src="imgUrl" alt="">
     <img :src="imgUrl" alt="">

     <hr />
     <!-- v-on 绑定事件 -->
    <button v-on:click="clickAction">按钮</button>
    <button @click="clickAction">按钮</button>

    <!-- 绑定动态class -->
     <h3 :class="flag ? 'active' : ''">绑定动态class</h3>
     <h3 :class="{ active: flag }">对象形式的</h3>
     <button @click="changeFalg">修改flag的值</button>

     <br>
     <hr>
     <!-- 条件渲染 -->
      <i v-if="flag">为真时渲染我</i>
      <strong v-else>不为真时渲染我</strong>

  </div>
</template>

<script setup>

import { ref } from 'vue'

const name = '张三'
const count = 1

const fun1 = () => {

  return "这是个函数"
}

const htmStr = `<i>我是html字符串</i>`

const imgUrl = 'https://img0.baidu.com/it/u=970536072,1332942785&fm=253&app=138&f=JPEG?w=800&h=1200'


const clickAction = () => {
  console.log('按钮被点击了')
}

const flag = ref(false)
const changeFalg = () => {
  console.log('修改前flag的值:', flag.value);
  flag.value = !flag.value
  console.log('修改后flag的值:', flag.value);
}

</script>

<style  scoped>
.box {
  text-align: center;
}
img {
  width: 200px;
  margin-right: 20px;
}

.active {
  color: red;
}
</style>